// path 是系统的模块
const path = require("path");
// 处理html的插件
const HtmlWebpackPlugin = require("html-webpack-plugin");
// 提取css
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
// 压缩css
const OptimizeCssAssetsWebpackPlugin = require("optimize-css-assets-webpack-plugin");
//删除dist
const { CleanWebpackPlugin } = require("clean-webpack-plugin");

const glob = require("glob");
// 解析处理 entry
const files = glob.sync("./src/pages/*/*.js");
const entry = {};
files.forEach(function (val) {
  entry[path.basename(val).replace(".js", "")] = val;
});

// 解析处理plugins
const htmls = glob.sync("./src/pages/*/*.html");
const r = htmls.map(function (html) {
  let name = path.basename(html);
  return new HtmlWebpackPlugin({
    template: html,
    filename: name,
    chunks: [name.replace(".html", "")],
  });
});

// console.log(r);

// console.log(process.env.NODE_ENV);
module.exports = {
  // 1. 入口
  // entry: "./src/pages/ad/ad.js",
  // 多入口
  // entry: {
  //   ad: "./src/pages/ad/ad.js",
  //   reg: "./src/pages/reg/reg.js",
  // },
  entry: entry,
  // 2. 出口
  output: {
    // 设置输入文件所在文件夹的绝度路径
    path: path.resolve(__dirname, "./dist"),
    // 输出的文件的名称
    // filename: "build.js",
    filename: "js/[name].js",
    publicPath: "./", // 查找静态资源的路径
  },
  //3. loader
  module: {
    rules: [
      // 解析css
      {
        test: /\.css$/, // 匹配所有.css文件
        // 数组中的解析方式是从后往前解析，那么loader位置不能随意更换
        use: [
          // "style-loader", // 创建style标签 把css插入html的head内
          {
            loader: MiniCssExtractPlugin.loader, // 提取css
            options: {
              publicPath: "../", // 资源查找路径
            },
          },
          "css-loader", // 解析加载css到js中（把css打成字符串）。
        ],
      },

      // 解析less
      {
        test: /\.less$/, // 匹配所有.less文件
        use: [
          {
            loader: MiniCssExtractPlugin.loader, // 提取css
            options: {
              publicPath: "../", // 资源查找路径
            },
          },
          "css-loader",
          "less-loader",
        ],
      },
      // 解析img
      {
        test: /\.(jpg|png|gif|webp)$/,
        loader: "url-loader",
        // 配置项
        options: {
          name: "[hash:16].[ext]", // 图片输出的名字hash长度16位 默认32位
          limit: 10 * 1024, // 小于10kb base64处理
          // 关闭url-loader的es Module  使用commonjs module解析 , url-loader默认使用es6模块化解析 而后续使用 html-loader 引入图片是 commonjs解析  不关闭会报错
          esModule: false,
          outputPath: "imgs", // 图片输出文件夹
        },
      },
      // 解析字体图标
      {
        test: /\.(eot|svg|ttf|woff|woff2)$/, // 处理字体格式文件
        loader: "file-loader",
        options: {
          name: "[hash:16].[ext]", // 输出名字
          outputPath: "fonts", // 输出路径（输出到文件夹fonts中）
        },
      },
      // 解析视频、音频
      // 音频视频
      {
        test: /\.(mp4|mp3)$/, // 处理音频视频
        loader: "file-loader",
        options: {
          name: "[hash:16].[ext]", // 输出名字
          outputPath: "media", // 输出路径（输出到文件夹media中）
        },
      },
      // 解析html
      {
        test: /\.html$/, // 处理html中引入img
        loader: "html-loader",
      },
    ],
  },
  // 4. plugins 插件
  plugins: [
    // 提取css，把css中打包的js中提取出来成为独立文件
    new MiniCssExtractPlugin({
      // 提取css
      filename: "css/[name].css", // 输出到css文件夹里
    }),

    new OptimizeCssAssetsWebpackPlugin(), // 压缩css
    new CleanWebpackPlugin(), //删除dist
  ].concat(r),
  // 5. 模式
  // 开发模式 development
  // 生产模式 production
  // 如果不设置mode 默认就是 development
  // mode: "development",
  mode: process.env.NODE_ENV,
  devServer: {
    contentBase: path.resolve(__dirname, "dist"), // 启动服务器目录
    compress: true, // 启动gzip
    port: 8080, // 端口
    open: true, // 自动打开服务
    publicPath: "/", // 静态资源查找路径
    openPage: "ad.html", // 打开的页面
  },
  target: "web", // 目标是浏览器
};
